<template>
  <div class="container">
    <button @click="getNext">获取土话情话</button>
    <p v-for="item in talkList" :key="item.id">
      {{ item.title }}
    </p>
  </div>
</template>

<script lang="ts" setup>
import { useLoveTalkStore } from '@/store/loveTalk'
const loveTalkStore = useLoveTalkStore()
import { storeToRefs } from 'pinia'
const { talkList } = storeToRefs(loveTalkStore)
async function getNext() {
  loveTalkStore.getTalk()
}
</script>

<style lang="scss" scoped>
h2 {
  margin-bottom: 20px;
}

select,
button {
  min-width: 40px;
  height: 30px;
  padding: 0 10px;
  margin: 0 5px;
  margin-bottom: 10px;
}

p {
  line-height: 30px;
}

.container {
  box-shadow: 0 0 5px #efefef;
  border: 1px solid #efefef;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>
